<template>
	<div>
		<my-header v-bind:header="header"></my-header>
		<div class="form">
			<div class="error" v-show="errorMsg.length!=0">
				{{errorMsg}}
			</div>
			<div class="row-1">
				<div class="label">
					<label class="label-1">账号</label>
					<span v-show="accountErrorMsg.length!=0">{{accountErrorMsg}}</span>
				</div>
				<div class="input">
					<input type="text" placeholder="请输入您的账号" v-model.trim="account" />
				</div>
				<div class="help" v-on:click="clearAccount()">
					<img src="../assets/img/del@3x.png" />
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="row-1">
				<div class="label">
					<label class="label-1">密码</label>
					<span v-show="pwdErrorMsg.length!=0">{{pwdErrorMsg}}</span>
				</div>
				<div class="input">
					<input type="password" placeholder="请输入您的密码" v-model.trim="pwd" v-show="isClosedEye" />
					<input type="text" placeholder="请输入您的密码" v-model.trim="pwd" v-show="!isClosedEye" />
				</div>
				<div class="help" v-on:click="togglePwd()">
					<img src="../assets/img/Closed Eye@3x.png" v-show="isClosedEye" />
					<img src="../assets/img/EYE@3x.png" v-show="!isClosedEye" />
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="button submit">
				<div v-show="!isConfirm" v-on:click="confirm()">
					登录
				</div>
				<div class="loading" v-show="isConfirm">
					<img src="../assets/img/loading@3x.png" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import myHeader from '../components/my-header'
	import $ from '../assets/js/jquery.min.js'
	import { mapActions } from 'vuex'
	import { USER_SIGNIN } from '../store/user'
	export default {
		name: 'login',
		data() {
			return {
				header: {
					cnTitle: "线下推广系统",
					enTitle: "Offline Promotion",
					cnStyle: {
						fontSize: "32px",
						marginTop: "15px"
					},
					enStyle: {
						fontSize: "18px"
					}
				},
				account: "",
				pwd: "",
				isConfirm: false,
				isClosedEye: true,
				errorMsg: "",
				accountErrorMsg: "",
				pwdErrorMsg: ""
			}
		},
		methods: {
			...mapActions([USER_SIGNIN]),
			clearAccount: function() {
				this.account = "";
			},
			togglePwd: function() {
				this.isClosedEye = !this.isClosedEye
			},
			confirm: function() {
				var _that = this;

				if(_that.account.length === 0) {
					_that.accountErrorMsg = "账号不能为空";
					return false;
				} else {
					_that.accountErrorMsg = "";
				}

				if(!/^([0-9]|[a-zA-Z]){6,14}$/.test(_that.pwd)) {
					_that.pwdErrorMsg = "密码格式不正确";
					return false;
				} else {
					_that.pwdErrorMsg = "";
				}

				_that.isConfirm = true;

        //var urlroot = API_ROOT;
        //var url = 'http://192.168.87.162:80/VmdService.Host.OpenService/OMLoginRequest';
        var urlroot = urlchange;
        var url = urlroot+'/OMLoginRequest';
        //openapi.mls.tutorabc.com.cn/VmdOpenService/OMLoginRequest
				$.ajax({
					type: 'GET',
					url: url,
					dataType: "jsonp",
					data: {
						"key": "omlogin",
						//"parameters": "userid=" + _that.account + "&password=" + _that.pwd,
						"ContentType": "application/x-www-form-urlencoded",
						"fun": "callbackFun",
						//"token": "z6fYujYV/QAKehzfyAI8ZxAVWto=",
            "AccountId": _that.account,
            "Password" : _that.pwd
					},
					jsonpCallback: "callbackFun",
					success: function(result) {
						//var jsonResult = JSON.parse(result)[0];
             var jsonResult = result.ResultInfo;
						if(jsonResult.msgcode === -1) {
							_that.errorMsg = "系统异常,请稍后再试";
						} else if(jsonResult.msgcode === -2) {
							_that.errorMsg = "您的账号或密码不匹配，请重新输入";
						} else if(jsonResult.msgcode === 0) {
							_that.USER_SIGNIN(jsonResult);
							 _that.$router.push('/info');
						} else if(jsonResult.msgcode === 3) {
							alert("当前账号在别的设备登录");
              _that.USER_SIGNIN(jsonResult);
              console.log(result)

							 _that.$router.push('/info');
						}

						_that.isConfirm = false;
					},
					error: function(error) {
						alert("系统异常");
						_that.isConfirm = false;
					}
				});
			}
		},
		computed: {},
		components: { myHeader }
	}
</script>
